<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../libs/three.js"></script>
	<style>
		body {
			/* 边距设置为0,设置溢出隐藏，完整的使用整个页面 */
			margin: 0;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<!-- 将在div里面输出画面 -->
	<div id="webgl-output"></div>

	<script>
		function init() {
			// 创建场景
			var scene = new THREE.Scene();
			// 设置摄像机
			var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
			// 创建渲染器
			var renderer = new THREE.WebGLRenderer();
			// 设置渲染器的初始颜色
			renderer.setClearColor(new THREE.Color(0xFFFFFF));
			// 设置输出canvas画面的大小
			renderer.setSize(window.innerWidth, window.innerHeight)
			// 显示三维坐标系
			var axes = new THREE.AxisHelper(20)

			// 添加坐标系到场景中
			scene.add(axes);
			// 创建地面的几何体
			var planeGeometry = new THREE.PlaneGeometry(60, 20);
			// 给地面物体上色
			var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
			// 创建地面
			var plane = new THREE.Mesh(planeGeometry, planeMaterial)
			// 物体移动位置
			// plane.rotation.x = -0.5 * Math.PI;
			// plane.position.x = 15;
			// plane.rotation.x = -0.5 * Math.PI;
			plane.rotation.z = -0.1 * Math.PI
			plane.position.x = 0;
			plane.position.y = 0;
			plane.position.z = 0;

			// 将地面添加到场景中
			scene.add(plane);

			// 定位相机，并且指向场景中心
			camera.position.x = 0;
			camera.position.y = 0;
			camera.position.z = 30;
			camera.lookAt(scene.position)

			// 将渲染器输出添加html元素中
			document.getElementById('webgl-output').appendChild(renderer.domElement);
			renderer.render(scene, camera)
		}
		window.onload = init
	</script>
</body>

</html>